//立即执行函数  监控区域模块制作
(function () {
  $(".viewport .monitor .tabs").on("click.bzm", "a", function () {
    $(this).addClass("active").siblings("a").removeClass("active");

    //选取对应索引号的content
    $(".viewport .monitor .content")
      .eq($(this).index())
      .show()
      .siblings(".content")
      .hide();
  });
  //先克隆marquee里面所有的行(row)
  $(".viewport .monitor .marquee-view .marquee").each(function () {
    //第一种克隆方法
    /* var rows = $(this).html();
    $(this).html($(rows + rows)); */
    //第二种克隆方法
    var rows = $(this).children().clone();
    $(this).append(rows);
  });
})();

//点位分布统计模块制作
(function () {
  //1.实例化对象
  var myChart = echarts.init(
    document.querySelector(".viewport .column .point .chart .pie")
  );
  //2.指定配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    //颜色需要写在option的属性，需要写在option下面
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        radius: ["10%", "75%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" },
        ],
        // // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10,
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8,
        },
      },
    ],
  };
  //3.将配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4.监听浏览器缩放，图标对象调用缩放resize函数
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//用户统计模块制作 柱形图
(function () {
  // 1.实例化对象
  var myChart = echarts.init(
    document.querySelector(".viewport .column .users .chart .bar")
  );
  // 2.指定配置项和数据
  // 中间省略的数据  准备三项
  var item = {
    name: "",
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: "#254065",
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: "opacity:0",
    },
  };
  var option = {
    // 修改线性渐变色方式 1
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: "#00fffb" }, // 0 起始颜色
        { offset: 1, color: "#0061ce" }, // 1 结束颜色
      ]
    ),
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: "0%",
      right: "3%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
      show: true,
      borderColor: "rgba(0, 240, 255, 0.3)",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        axisTick: {
          alignWithLabel: false,
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // x坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
            // width:8,  x轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          alignWithLabel: false,
          //不显示刻度
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // y坐标轴颜色设置
        axisLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
            // width:8,  y轴线的粗细
            // opcity: 0,   如果不想显示x轴线 则改为 0
          },
        },
        //y轴分割线的样式
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  //3.将配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//订单区域模块制作
(function () {
  // 1.准备数据
  var data = {
    day365: { orders: "20,301,987", amount: "99834" },
    day90: { orders: "301,987", amount: "9834" },
    day30: { orders: "1,987", amount: "3834" },
    day1: { orders: "987", amount: "834" },
  };

  $(".viewport .column .order .filter").on("click.bzm", "a", function () {
    // 2.点击切换激活模式
    $(this).addClass("active").siblings("a").removeClass("active");
    // 3.点击切换数据
    // 获取当前点击项的索引
    var type = $(this).attr("data-index");
    index = $(this).index();
    // 根据当前索引，去找数据
    var currentData = data[type];
    //获取显示 订单数量 的容器，并重新赋值
    $(".viewport .column .order .data h4:eq(0)").html(currentData.orders);
    //获取显示 金钱数量 的容器，并重新赋值
    $(".viewport .column .order .data h4:eq(1)").html(currentData.amount);
  });
  // 4.开启定时器切换数据
  var index = 0;
  var filter_a = $(".viewport .column .order .filter a");
  // 开启定时器每隔3s，自动让a触发点击事件即可
  var timer = setInterval(function () {
    filter_a[index].click();
    index++;
    if (index >= filter_a.length) index = 0;
  }, 3000);
  // 鼠标经过order时，关闭定时器，离开时开启定时器
  $(".viewport .column .order").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        filter_a[index].click();
        index++;
        if (index >= filter_a.length) index = 0;
      }, 3000);
    }
  );
})();

//销售统计模块制作
(function () {
  //1.实例化对象
  var myChart = echarts.init(
    document.querySelector(".viewport .column .sales .inner .chart .line")
  );
  //2.指定配置项和数据
  // (1)准备数据
  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };
  var option = {
    //修改折线颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      //通过坐标轴来触发
      trigger: "axis",
    },
    legend: {
      right: "10%", //修改图例位置，距离容器右边10%
      //修改图例文本样式
      textStyle: {
        color: "#4c9bfd", //图例文字颜色
      },
      //如果series里面设置了name，此时图例组件的data可以省略
    },
    grid: {
      //修改折线图大小
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, //显示边框
      borderColor: "#012f4a", //边框颜色
      containLabel: true, //包含刻度文字在内
    },
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        show: false, //去掉刻度线
      },
      axisLabel: {
        color: "#4c9bfd", //修改刻度标签的文本颜色
      },
      axisLine: {
        show: false, //去掉轴线
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, //去掉刻度线
      },
      axisLabel: {
        color: "#4c9bfd", //修改刻度标签的文本颜色
      },
      splitLine: {
        // 修改y轴分割线的样式
        lineStyle: {
          color: "#012f4a", //修改y轴分割线的颜色
        },
      },
    },
    series: [
      {
        name: "预期销售额",
        data: data.year[0],
        type: "line",
        stack: "总量",
        smooth: true, //让折线平滑展示
      },
      {
        name: "实际销售额",
        data: data.year[1],
        type: "line",
        stack: "总量",
        smooth: true, //让折线平滑展示
      },
    ],
  };
  //3.将配置项和数据给我们的实例化对象
  myChart.setOption(option);
  //4.销售统计( sales )-切换效果
  // (2)点击切换效果
  $(".viewport .column .sales .inner .caption").on(
    "click.bzm",
    "a",
    function () {
      // 把当前点击的索引给index，确保index是在点击后的基础上开启定时器
      index = $(this).index() - 1; //因为有一个h3标签与a标签同级，所以要减去这个h3标签
      // 点击当前a 高亮显示 添加active
      $(this).addClass("active").siblings("a").removeClass("active");
      // (3)拿到当前a的自定义属性值
      var type = $(this).attr("data-index");
      // (4)根据拿到的值去找数据
      var arr = data[type];
      // (5)根据拿到的数据去重新修改series里面的data值
      option.series[0].data = arr[0];
      option.series[1].data = arr[1];
      // (6)把配置好的数据给实例对象，重新渲染图表
      myChart.setOption(option);
    }
  );

  // 5.tab栏开启自动切换效果
  // 开启定时器每隔3s，自动让a触发点击事件即可
  var index = 0;
  var caption_a = $(".viewport .column .sales .caption a");
  var timer = setInterval(function () {
    caption_a[index].click();
    index++;
    if (index >= caption_a.length) index = 0;
  }, 3000);
  // 鼠标经过sales时，关闭定时器，离开时开启定时器
  $(".viewport .column .sales").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        caption_a[index].click();
        index++;
        if (index >= caption_a.length) index = 0;
      }, 3000);
    }
  );

  // 6.监听浏览器缩放，图标对象调用缩放resize函数
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//渠道区域模块制作 雷达图
(function () {
  //1.实例化对象
  var myChart = echarts.init(
    document.querySelector(".viewport .column .wrap .channel .data .radar")
  );
  //2.指定配置项和数据
  option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ["55%", "15%"],
      textStyle: {
        fontSize: 10,
      },
    },
    radar: {
      //修改雷达图的大小
      radius: "65%",
      // 雷达图的指示器 内部填充数据
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 },
      ],
      shape: "circle",
      //分割的圆圈个数
      splitNumber: 4,
      //修饰雷达图的文本颜色
      name: {
        textStyle: {
          color: "#4c9bfd", //改变文字的颜色
        },
      },
      //分割的圆圈线条的样式
      splitLine: {
        //修改线条的文本样式
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)", //修改线条颜色
        },
      },
      splitArea: {
        show: false,
      },
      //坐标轴的线
      axisLine: {
        //修改线条的文本样式
        lineStyle: {
          color: "rgba(238, 197, 102, 0.5)", //修改线条颜色
        },
      },
    },

    series: [
      {
        name: "北京",
        type: "radar",
        //填充区域的线条颜色
        lineStyle: {
          normal: {
            width: 1,
            opacity: 0.5,
          },
        },
        data: [[90, 19, 56, 11, 34]],
        //设置图形标记（拐点）为小圆点
        symbol: "circle",
        //设置小圆点大小
        symbolSize: 5,
        //设置小圆点颜色
        itemStyle: {
          color: "#fff",
        },
        //让小圆点显示相关数据
        label: {
          show: true,
          color: "#fff",
          fontSize: 10,
        },
        //修饰区域填充的背景颜色
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)",
        },
      },
    ],
  };
  //3.将配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//销售进度模块制作 饼状图 半圆形
(function () {
  // 1.创建实例化对象
  var myChart = echarts.init(
    document.querySelector(
      ".viewport .column .wrap .quarter .inner .chart .box .gauge"
    )
  );
  // 2.指定配置项和数据
  var option = {
    series: [
      {
        name: "访问来源",
        type: "pie",
        // 放大图形
        radius: ["130%", "150%"],
        // 移动下位置  套住50%文字
        center: ["48%", "80%"],
        labelLine: {
          show: false,
        },
        //起始角度，支持范围[0, 360],把起始角度变为180，不是旋转
        startAngle: 180,
        // 鼠标经过不需要放大偏移图形
        hoverOffset: 0,
        data: [
          {
            value: 50,
            itemStyle: {
              // 颜色渐变#00c9e0->#005fc1
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                  { offset: 1, color: "#005fc1" }, // 1 结束颜色
                ]
              ),
            },
          },
          { value: 50, itemStyle: { color: "#12274d" } },
          {
            value: 100,
            itemStyle: {
              color: "transparent",
            },
          },
        ],
      },
    ],
  };
  // 3.把配置项和数据给实例对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//全国热榜模块制作
(function () {
  //第一步：得到后台数据（实际开发中，这个数据通过ajax请求获得）
  var hotData = [
    {
      city: "北京", // 城市
      sales: "25, 179", // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "7,407", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true },
      ],
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false },
      ],
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true },
      ],
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false },
      ],
    },
    {
      city: "山东",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true },
      ],
    },
  ];

  // 第二步：根据数据渲染各省热销sup模块内容
  //遍历hotData对象
  var supHTML = "";
  $.each(hotData, function (i, item) {
    //拼接字符串把数据渲染到li的span里面
    supHTML += `<li><span>${item.city}</span><span>${item.sales}<s class=
    ${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
    // 把生成的五个小li给sub盒子
    $(".viewport .column .top .inner .province .data ul.sup").html(supHTML);
  });

  // 第三步：当鼠标进入tab状态栏的时候
  $(".viewport .column .top .inner .province .data ul.sup").on(
    "mouseenter",
    "li",
    function () {
      // 同步索引号
      index = $(this).index();
      // 渲染当前城市的品牌对象
      render($(this));
    }
  );

  // 第四步：封装一个函数 里面设置sup当前小li高亮还有对应的品牌对象渲染
  function render(that) {
    //鼠标经过当前的小li要高亮显示
    that.addClass("active").siblings("li").removeClass("active");
    // 拿到目标城市的品牌数组
    var currentBrands = hotData[that.index()].brands;
    // 开始遍历数组里的对象，并把对象里的数据插入到新创建的标签中
    var subHTML = "";
    $.each(currentBrands, function (i, item) {
      subHTML += `<li><span>${item.name}</span><span>${item.num}<s class="${
        item.flag ? "icon-up" : "icon-down"
      }"></s></span></li>`;
    });
    // 把生成的六个小li给sub盒子
    $(".viewport .column .top .inner .province .data ul.sub").html(subHTML);
  }

  // 第五步：默认把tab状态栏sup下面的第一个小li处于鼠标经过状态
  var lis = $(".viewport .column .top .inner .province .data ul.sup li");
  lis.eq(0).mouseenter();

  // 第六步：开启定时器
  var index = 0;
  var timer = setInterval(function () {
    index++;
    if (index >= lis.length) index = 0;
    render(lis.eq(index));
  }, 1000);

  // 第七步：鼠标经过sup停止定时器，离开时恢复定时器
  $(".viewport .column .top .inner .province .data ul.sup").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= lis.length) index = 0;
        render(lis.eq(index));
      }, 1000);
    }
  );
})();
